<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item label="搜索">
        <el-input v-model="seachInfo" style="width:300px" type="text" placeholder="请输入关键字、用户名、账号"></el-input>
      </el-form-item>
      <el-form-item label="编辑时间">
        <el-date-picker v-model="datePicker" type="daterange" align="left" unlink-panels format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="pickerChange" :picker-options="pickerOptions" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">搜索</el-button>
      </el-form-item>
    </el-form>
    <div class="_list">
      <el-table highlight-current-row @selection-change="handleSelectionChange" :height="$tools.tableHeight()" :data="dataList" style="width: 100%" v-loading.body="listLoading">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="内容" width="250">
          <template slot-scope="scope">
            <div class="content">
              <el-popover placement="right" width="350" trigger="hover" v-if="scope.row.fileContentext && scope.row.fileContentext.length > 10">
                <div class="con" v-html="$tools.filtersLine(scope.row.fileContentext)"></div>
                <span slot="reference" class="reference">{{ scope.row.fileContentext }}</span>
              </el-popover>
              <span v-else class="reference">{{ scope.row.fileContentext }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="所属文件夹" width="180">
          <template slot-scope="scope">
            {{ scope.row.fileName }}
          </template>
        </el-table-column>
        <el-table-column label="系统类型" prop="sysType"></el-table-column>
        <el-table-column label="用户等级">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isVip === 'YES'">VIP</el-tag>
            <el-tag v-else type="info">普通</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="用户信息" width="200">
          <template slot-scope="scope">
            <div class="user_info">
              <div class="thumbnail">
                <img :src="scope.row.avatar ? scope.row.avatar : '/static/images/avatar_user.png'" />
              </div>
              <div class="info">
                <div class="_name">{{ scope.row.userName }}</div>
                <div>{{ scope.row.mobile }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="编辑时间" width="160" sortable :sort-method="sortByModifyTime">
          <template slot-scope="scope">
            {{ scope.row.modifyTime | formatDate }}
          </template>
        </el-table-column>
        <el-table-column label="新建时间" sortable :sort-method="sortByCreateTime" width="160">
          <template slot-scope="scope">
            {{ scope.row.createTime | formatDate }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="arrDelete('1', scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pages">
      <div class="left">
        <el-tooltip class="item" effect="dark" content="批量删除" placement="top">
          <el-button size="small" type="danger" @click="arrDelete('2')">批量删除</el-button>
        </el-tooltip>
      </div>
      <div class="right" v-if="total > 0">
        <el-pagination background :total="total" :page-size="15" :current-page.sync="page" layout="total, prev, pager, next, jumper" @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import mixinsTable from '@/util/mixins.table';

export default {
  name: 'newsList',
  mixins: [mixinsTable],
  data () {
    return {
      seachInfo: '',
      searchField: 'seachInfo',
      APISERVER: 'getFileList',
      DELETEAPI: 'deleteFileList',
      params: {
        searchContentext: {}
      },
      ids: []
    };
  },
  created () {
    this.seachInfo = this.$route.query.mobile || '';
    this.getList();
  },
  methods: {
    sortByModifyTime (a, b) {
      return a.modifyTime < b.modifyTime;
    },
    sortByCreateTime (a, b) {
      return a.createTime < b.createTime;
    },
  }
};
</script>
<style lang="less" scoped>
.el-popover {
  padding: 6px;
}
.editArea {
  padding: 3px;
  cursor: pointer;
  &:hover {
    margin: -1px;
    border: 1px dashed #666;
  }
}
.con {
  line-height: 35px;
  padding: 10px;
}
.content {
  span.reference {
    display: block;
    height: 40px;
    line-height: 40px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}
.product_info {
  padding: 3px 0;
  overflow: hidden;
  .thumbnail {
    width: 50px;
    height: 50px;
    float: left;
    img {
      width: 50px;
      height: 50px;
    }
  }
  .info {
    overflow: hidden;
    padding-left: 10px;
    .price {
      color: red;
      font-size: 14px;
    }
    .p_price {
      color: #b7b5b5;
      text-decoration: line-through;
    }
    ._name {
      display: block;
      font-size: 13px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
